<script setup>
import { ref } from "vue";
import { cn } from "@/lib";

const active = ref(0);

const { menu } = defineProps({
  menu: {
    type: Array,
    required: true,
  },
});

const emits = defineEmits(["clicked"]);

const clicked = (index, item) => {
  active.value = index;
  emits("clicked", item.replace(/\s+/g, "-").toLowerCase());
};
</script>

<template>
  <div class="flex h-12 bg-[#1b1b1b] xl:justify-center mt-[25px] bg-none">
    <button
      v-for="(item, index) in menu"
      :key="`tab-${index}`"
      :class="cn('block w-full m-[0_0_-2px] text-sm text-[#585858] uppercase bg-none border-r border-solid border-[#141414] transition-colors duration-200 last:border-r-0 hover:text-white focus:text-white xl:w-auto xl:m-[0_30px] xl:text-[20px] xl:border-b-[2px] xl:border-solid xl:border-transparent',active===index ? 'text-white bg-[#141414] xl:bg-none xl:border-b-white':'')"
      type="button"
      @click="clicked(index, item)"
    >
      {{ item }}
    </button>
  </div>
</template>
